{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>产品数量</div>
                <div>{$goodsTotal|default='0.00'}</div>
                <div>当前系统产品数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" data-action-blur="" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>用户数量</div>
                <div>{$usersTotal|default='0'}</div>
                <div>当前系统投资的用户数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>投资总额</div>
                <div>{$amountTotal|default='0.00'}</div>
                <div>当前已投资总额</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>预计利息总额</div>
                <div>{$lxTotal|default='0.00'}</div>
                <div>当前所有投资预计到期利息总额</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>

    </div>
</div>

<div class="layui-row layui-col-space15 margin-top-10">
<!--  近十天投资数量 近十天投资金额  -->
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main5" style="width:100%;height:350px"></div>
        </div>
    </div>


    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main3" style="width:100%;height:350px"></div>
        </div>
    </div>


    <!--  结束  -->

    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main4" style="width:100%;height:350px"></div>
        </div>
    </div>

    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main7" style="width:100%;height:350px"></div>
        </div>
    </div>




<!--    <div class="layui-col-xs12">-->
<!--        <div class="think-box-shadow">-->
<!--            <div id="main8" style="width:100%;height:350px"></div>-->
<!--        </div>-->
<!--    </div>-->

</div>

<label class="layui-hide">
    <textarea id="dataDays">{$days|json_encode}</textarea>
    <textarea id="dataMonth">{$months|json_encode}</textarea>
</label>

<script>

    require(['echarts'], function (echarts) {
        var data1 = JSON.parse($('#dataDays').html());
        var data2 = JSON.parse($('#dataMonth').html());

        console.log(data1)
        var days = data1.map(function (item) {
            return item['当天日期'];
        });

        var months = data2.map(function (item){
            return item['当前月份'];
        });

        // var data2 = JSON.parse($('#jsondata2').html());

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天投资数量趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value',minInterval: 1, axisLabel: {
                            formatter: '{value} 单'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        // showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 单', show: true}},
                        data: data1.map(function (item) {
                            return item['投资数量'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main5')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近十天投资金额趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: days, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 元'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        // smooth: true,
                        showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        type: 'bar', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
                        data: data1.map(function (item) {
                            return item['投资金额'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main3')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '近一年投资数量增涨趋势'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: months, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', minInterval: 1, axisLabel: {
                            formatter: '{value} 单'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        // smooth: true,
                        showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 单', show: true}},
                        data: data2.map(function (item) {
                            return item['投资数量'];
                        }),
                    }
                ]
            });
        })(echarts.init(document.getElementById('main4')));

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center',text: '近一年投资与利息增涨趋势'}],
                tooltip: {trigger: 'axis'},
                xAxis: [{data: months, gridIndex: 0}],
                yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 元'}}],
                series: [
                    // {
                    //     name: '利息金额', type: 'line',
                    //     smooth: true, showBackground: true,
                    //     areaStyle: {color: 'rgba(180, 180, 180, 0.5)',bottom:200},
                    //     label: {position: 'left', formatter: '{c} 元', show: true,position: 'inside',},
                    //     data: data2.map(function (item) {
                    //         return item['利息金额'];
                    //     }),
                    // },
                    {
                        name: '投资金额', type: 'bar',showBackground: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)',bottom:200},
                        label: {formatter: '{c} 元', show: true,position: 'outside',},
                        data: data2.map(function (item) {
                            return item['投资金额'];
                        }),
                    },
                ]
            });
        })(echarts.init(document.getElementById('main7')));
    });
</script>

{/block}
